<template>
  <div>
<!--    <custom-field-form size="small" style="top:15px;width:1200px;" :data="queryCondition"
                       :fields="[{id: 'name', name: '大区名称', colSpan: 6}]">
      <el-col :span="5">
        <el-button type="primary" style="margin-left:10px;" size="small" @click="loadDataList()">查询</el-button>
      </el-col>
    </custom-field-form>-->
    <el-table
        v-loading="isLoading"
        :data="dataList"
        key="oilRegionList"
        class="query-table"
        tooltip-effect="dark"
        style="width: 100%"
        border
        default-expand-all>
      <el-table-column key="index" label="序号" type="index" align="center" width="50"
                       header-align="center"></el-table-column>
      <el-table-column prop="name" show-overflow-tooltip label="产品类型" min-width="150" header-align="center"/>
      <el-table-column label="采油大区" min-width="150" header-align="center">
        <template slot-scope="scope">
          <el-tag type="success" size="mini" v-for="item in scope.row.oilRegionList" :key="item.id" style="margin-right: 10px">
            {{ item.name }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="采气大区" min-width="150" header-align="center">
        <template slot-scope="scope">
          <el-tag type="success" size="mini" v-for="item in scope.row.gasRegionList" :key="item.id" style="margin-right: 10px">
            {{ item.name }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="油气田" min-width="150" header-align="center">
        <template slot-scope="scope">
          <el-tag type="success" size="mini" v-for="item in scope.row.fieldList" :key="item.id" style="margin-right: 10px">
            {{ item.name }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column key="option" width="160" label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="openDlg(scope.row)">维护
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        style="text-align:center;padding-top:10px;"
        background
        @size-change="handlePageSizeChange"
        @current-change="loadDataList"
        :current-page="pageNo"
        :page-sizes="[10, 20, 30, 40,50,100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="dataCount"
    ></el-pagination>
    <el-dialog v-loading="!dlgVisible" title="油气关系维护" :visible.sync="dlgVisible"
               :close-on-click-modal="false" width="80%" >
      <el-form ref="Form" :model="row" :rules="rules" label-width="auto" style="width:100%;">
        <el-row>
          <el-col span="6">
            <el-form-item label="产品类型:">
              <el-input v-model="row.name" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col span="6">
            <el-form-item label="采油大区:">
              <el-select v-model="row.oilRegionList" multiple filterable>
                <el-option
                    v-for="item in oilRegionList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col span="6">
            <el-form-item label="采气大区:">
              <el-select v-model="row.gasRegionList" multiple filterable>
                <el-option
                    v-for="item in gasRegionList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col span="6">
            <el-form-item label="油气田:">
              <el-select v-model="row.fieldList" multiple filterable>
                <el-option
                    v-for="item in fieldList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col style="text-align: center">
            <el-button type="success" size="small" @click="saveUnit">保存</el-button>
            <el-button size="small" @click="dlgVisible = false">取消</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  $$route: {
    meta: {
      title: '油气田对应关系'
    }
  },
  name: "BuildOfficeList",
  data() {
    return {
      isLoading: false,
      dataList: [],
      dlgVisible: false,
      row: {},
      queryCondition: {
        dictId: 'build-office'
      },
      totalPage: 1,
      pageNo: 1,//当前页码
      dataCount: 0,//数据总条数
      pageSize: 10,//每页条数
      gasRegionList: [],
      oilRegionList: [],
      fieldList: [],
      selectLoading1: false,
      selectVal1: [],
      selectLoading2: false,
      selectVal2: [],
      selectLoading3: false,
      selectVal3: [],
      rules: [],
    };
  },
  mounted() {
    this.loadDataList()
    this.getGasRegion()
    this.getOilRegion()
    this.getOilField()
  },
  methods: {
    loadDataList(pageNo) {
      this.isLoading = true;
      if (!pageNo) {
        pageNo = 1;
      } else {
        this.pageNo = pageNo;
      }
      this.queryCondition.pageNo = this.pageNo;
      this.queryCondition.pageSize = this.pageSize;

      this.$get("/cascade/data", this.queryCondition, (response) => {
        this.dataList = response.data;
        this.dataCount = response.total;
      }, () => {
        this.isLoading = false;
      });
    },
    openDlg(row) {
      this.row = JSON.parse(JSON.stringify(row))
      if(this.row.oilRegionList){
        let x = []
        this.row.oilRegionList.forEach(i => {
          x.push(i.source)
        })
        this.row.oilRegionList = x
      }
      if(this.row.gasRegionList){
        let y = []
        this.row.gasRegionList.forEach(i => {
          y.push(i.source)
        })
        this.row.gasRegionList = y
      }
      if(this.row.fieldList){
        let z = []
        this.row.fieldList.forEach(i => {
          z.push(i.source)
        })
        this.row.fieldList = z
      }
      this.selectLoading1 = true
      this.$get("/cascade/queryChildrenList", {parentSource: row.source, type: 'oil-field'}, (response) => {
        this.selectVal1 = []
        response.data.forEach(i => {
          this.selectVal1.push(i.source)
        })
      }, () => {
        this.selectLoading1 = false
      });
      this.dlgVisible = true
    },
    getGasRegion() {//获取字典值
      this.$get("/dict_value/data", {dictId: 'gas-region'}, (response) => {
        let list = [];
        if (response.data) {
          for (let item of response.data) {
            if (item.state == 'delete') {
              continue
            }
            if (item.state != 'normal') {
              item.disabled = true
            }
            list.push(item)
          }
        }
        this.gasRegionList = list
      })
    },
    getOilRegion() {//获取字典值
      this.loadMetaList('oil-region',(res)=>{
        this.oilRegionList = res.data;
      })
      this.$get("/dict_value/data", {dictId: 'oil-region'}, (response) => {
        let list = [];
        if (response.data) {
          for (let item of response.data) {
            if (item.state == 'delete') {
              continue
            }
            if (item.state != 'normal') {
              item.disabled = true
            }
            list.push(item)
          }
        }
        this.oilRegionList = list
      })
    },
    getOilField() {//获取字典值
      this.$get("/dict_value/data", {dictId: 'oil-field'}, (response) => {
        let list = [];
        if (response.data) {
          for (let item of response.data) {
            if (item.state == 'delete') {
              continue
            }
            if (item.state != 'normal') {
              item.disabled = true
            }
            list.push(item)
          }
        }
        this.fieldList = list
      })
    },
    //处理每页条数变更
    handlePageSizeChange(size) {
      this.pageSize = size;
      this.loadDataList(this.pageNo);
    },
    saveUnit() {
      const message = this.$message;
      this.$post("/cascade/update", {
        parentSource: this.row.source,
        oilRegionList: this.row.oilRegionList,
        gasRegionList: this.row.gasRegionList,
        fieldList: this.row.fieldList
      }, () => {
        message.success('更新成功！');
        this.loadDataList(this.pageNo)
        this.dlgVisible = false
      });
    }
  }
}
</script>

<style scoped>
.query-table {
  position: relative;
  padding: 0 10px;
  box-sizing: border-box;
}
</style>